dojo.provide("xray.tools.Transport");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("xray.tools.Transport", 
	[dijit._Widget, dijit._Templated], {
		
	iconRecord: dojo.moduleUrl("xray.tools.resources", "iconRecord.png"),
	iconPause: dojo.moduleUrl("xray.tools.resources", "iconPause.png"),
	iconPlay: dojo.moduleUrl("xray.tools.resources", "iconPlay.png"),
	
	templateString: '<span class="transportContainer"><img src="${iconRecord}" dojoAttachPoint="iconRecord" /> <img src="${iconPause}" dojoAttachPoint="iconPause" /> <img src="${iconPlay}" dojoAttachPoint="iconPlay" /></span>',
	
	constructor: function(){
		this.toggle = [];
		this.interval = [];
	},
	
	postCreate: function(){
		dojo.connect(this.iconRecord, "onclick", this, function(){
			dojo.publish("xray/tools/transport/record");

			this.toggleOpacity(this.iconRecord);
		});
		
		dojo.connect(this.iconPause, "onclick", this, function(){
			dojo.publish("xray/tools/transport/pause");
			
			if (!this.toggle[this.iconPlay.src]){
				this.toggleOpacity(this.iconPlay);	
			}
		});
		
		dojo.connect(this.iconPlay, "onclick", this, function(){
			dojo.publish("xray/tools/transport/resume");
			
			this.toggleOpacity(this.iconPlay, true);
		});
	},
	
	// type: bool, true == on, false == off
	toggleOpacity: function(elem, toggleType){
		var key = elem.src;
		
		if (toggleType){
			this.toggle[key] = toggleType;
		}
		
		if (this.toggle[key]){
			clearInterval(this.interval[key]);
			
			this.toggle[key] = null;

			// clear opacity if button is clicked when opacity is 0.2
			if (dojo.style(elem, "opacity") == "0.2"){
				dojo.style(elem, "opacity", "1");
			}
		}else{
			this.toggle[key] = true;
			this.interval[key] = setInterval(dojo.hitch(this, function(elem){
				if (dojo.style(elem, "opacity") == "0.2"){
					dojo.style(elem, "opacity", "1");
				}else{
					dojo.style(elem, "opacity", "0.2");
				}
			}, elem), 400);
		}
	}
});